<template>
	<view class="pub-component" v-if="currShowModal">
		<view class="pub-modal">
			<view class="header">
				<text>记一笔</text>
				<text class="iconfont icon-close" @click="handleClickClose"></text>
			</view>
			<view class="body">
				<view class="account-header">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							支出时间：
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">{{date}}</view>
							</picker>
						</view>
					</view>
					<view class="account-count">
						<text class="icon">￥</text>
						<input type="number" v-model="payCount" placeholder="" @input="handleInput" />
					</view>
				</view>
				<view class="type-list">
					<view class="account-list" v-for="item in typeList" :key="item.id" @click="handleClickSelectedType(item)">
						<view :class="[item.flag ? 'active': '']">
							<text class="iconfont"  :class="item.icon"></text>
						</view>
						<text class="title">{{item.name}}</text>
					</view>
					<view class="account-list" @click="handleClickOpen">
						<view>
							<text class="iconfont icon-zengjia1"></text>
						</view>
						<text class="title classification">分类管理</text>
					</view>
				</view>
				<view class="add-btn">
					<button type="button" :class="[readShow ? '' : 'active_green']" :disabled="readShow" @click="submitType">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {defineComponent, ref, reactive, toRefs, watch} from 'vue'
	import {getAccountType, addAccount} from '../../../api/app.js'
	import {typeConfig} from '../../../utils/config.js'
	import {getCurrDate} from '../../../utils/utils.js'
	export default defineComponent({
		props: {
			addShowModal: {
				type: Boolean,
				default: false
			}
		},
		setup(props, context) {
			const state = reactive({
				readShow: true,
				typeId: '',
				date: '',
				payCount: '',
				startDate: '2021-01-01',
				endDate: '',
				currShowModal: false,
				typeList: [
					// {id: '1',name: '餐饮', flag: false, icon: 'icon-canyin'},
					// {id: '2',name: '交通', flag: false, icon: 'icon-jiaotong'},
					// {id: '3',name: '服饰', flag: false, icon: 'icon-clothes'},
					// {id: '4',name: '购物', flag: false, icon: 'icon-gouwu'},
					// {id: '5',name: '教育', flag: false, icon: 'icon-jiaoyu'},
					// {id: '6',name: '娱乐', flag: false, icon: 'icon-yule'},
					// {id: '7',name: '医疗', flag: false, icon: 'icon-yiliao'},
					// {id: '8',name: '保险', flag: false, icon: 'icon-baoxian'},
					// {id: '9',name: '生活缴费', flag: false, icon: 'icon-shenghuojiaofei'},
					// {id: '10',name: '红包', flag: false, icon: 'icon-hongbao'},
				]
			})

			// 监听弹窗的状态
			watch(() => props.addShowModal, (newVal)=> {
				state.currShowModal = newVal
			})
			
			// 获取类型
			const getType = () => {
				getAccountType().then(res=> {
					console.log(res)
					const {code, data} = res
					if (code === 200) {
						data.forEach(item => {
							item['flag'] = false
							item.icon = typeConfig[item.name]
						})
						state.typeList = data
					}
				})	
			}
			
			// 关闭弹窗
			const handleClickClose = () => {
				context.emit('closeAdd')
			}
			// 选中类型
			const handleClickSelectedType = (el) => {
				state.typeList.forEach(item => {
					if(el.id == item.id) {
						item.flag = true
					} else {
						item.flag = false
					}
				})
				// context.emit('selectedAdd', el)
				state.typeId = el.id
			}
			// 获取时间
			const bindDateChange = (e) => {
			    state.date = e.target.value
			}
			
			// 初始化时间
			const currentDate = getCurrDate({
				format: true
			})
			
			state.date = currentDate
			// state.startDate = getCurrDate('start')
			state.endDate = getCurrDate('end');
			console.log(state)
			
			// 打开分类管理页面
			const handleClickOpen = () => {
				uni.navigateTo({
				    url: '/pages/type/index'
				});
			}
			// 获取输入的金额
			const handleInput = (e) => {
				let value = e.target.value
				if (value.length > 0) {
					state.readShow = false
				}
			}
			
			// 添加账单
			const submitType = () => {
				let params = {type_id: state.typeId, consumption_money: state.payCount, expenditure_date: state.date}
				addAccount(params).then(res=> {
					console.log(res)
					if (res.code === 200) {
						uni.showToast({
						    title: res.msg,
						    duration: 2000,
							icon: 'success'
						});
						state.typeId = ''
						state.payCount = ''
						state.date = ''
						context.emit('closeAdd')
					} else {
						uni.showToast({
						    title: res.message,
						    duration: 2000,
							icon: 'error'
						});
					}
				})
				
			}
			
			
			return {
				...toRefs(state),
				handleClickClose,
				handleClickSelectedType,
				bindDateChange,
				handleClickOpen,
				getType,
				submitType,
				handleInput
			}
		}
	})
</script>

<style scoped>
	.pub-component{
		position: fixed;
		top: 0px;
		left: 0px;
		display: flex;
		align-items: flex-end;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.2);
	}
	.pub-modal{
		width: 100%;
		height: 85%;
		background: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		transition: 1s linear;
	}
	.pub-modal .header{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
	}
	.pub-modal .header text:nth-child(1) {
		font-size: 14px;
	}
	.pub-modal .header text:nth-child(2) {
		position: absolute;
		right: 10px;
		top: 10px;
		font-size: 19px;
	}
	.body{
		padding: 20px;
		/* background: #eee; */
	}
	.account-header{
		margin: 0px 0 10px;
	}
	.account-count{
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ddd;
		padding-bottom: 10px;
	}
	.account-count .icon{
		font-size: 24px;
		font-weight: 500;
	}
	.account-count input{
		font-size: 36px;
		height: 42px;
		line-height: 42px;
	}
	.type-list{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.type-list .account-list {
		display: flex;
		flex-direction: column;
		width: 16%;
		/* margin-right: 30px; */
		margin-bottom: 15px;
		/* padding: 8px 0px; */
		color: #333;
		background: #FFF;
		font-size: 13px;
		text-align: center;
		border-radius: 4px;
	}
	.type-list .account-list .iconfont{
		padding: 5px;
		font-size: 18px;
		border-radius: 100%;
		background-color: #eee;
	}
	.type-list .account-list .title{
		font-size: 10px;
	}
	.classification{
		color:#0077AA;
	}
	.type-list .account-list view{
		margin-bottom: 10px;
	}
	.type-list .account-list view.active .iconfont{
		background: #038F42;
		color: #fff;
	}
	.uni-list-cell{
		display: flex;
		align-items: center;
	}
	.add-type{
		/* margin-top: 20px; */
		margin-bottom: 50px;
	}
	.add-type input{
		padding: 15px 10px;
		background: #eee;
		border-radius: 4px;
	}
	
	.add-btn button{
		width: 40%;
		color: #333;
	}
	.add-btn .active_green{
		color: #fff;
		background: #038F42;
	}
</style>
